<template>
  <div class="app-container">
    <el-card v-if="hasOperatePermission" shadow="never" class="mb-10">
      <el-button type="primary" @click="memberManageDialogHandle">添加成员</el-button>
    </el-card>
    <el-card v-loading="pageLoading" shadow="never">
      <PaginationTable
        :table-data="tableData"
        :columns="columns"
        :total="total"
        :current-page="currentPage"
        :page-size="pageSize"
        @page-change="handlePageChange"
        @size-change="handleSizeChange"
      >
        <!-- 自定义列内容 -->
        <template #roleType="scope">
          {{ roleTypeMap[scope.row.roleType] || "--" }}
        </template>
        <template #operate="scope">
          <div v-if="scope.row.roleType != 1">
            <el-button type="primary" link @click="handleOpenDialog(scope.row)">修改</el-button>
            <el-button type="primary" link @click="handleDelete(scope.row)">移除</el-button>
          </div>
          <div v-else>--</div>
        </template>
      </PaginationTable>
    </el-card>
    <MemberManageDialog
      v-if="memberManageVisible"
      :model-value="memberManageVisible"
      :details-type="memberManageType"
      :details-param="memberManageDetails"
      @cancel="memberManageVisible = false"
      @confirm="confirmMemberManage"
    />
  </div>
</template>

<script setup lang="ts">
import PaginationTable, { TableColumn } from "@/views/templatePage/PaginationTable/index.vue";
import MemberManageAPI, { UserListInfo } from "@/api/memberManage";
import MemberManageDialog from "@/views/memberManage/memberList/components/MemberManageDialog.vue";
import { getHasOperatePermission } from "@/utils/auth";

// 判断是否拥有权限
const hasOperatePermission: boolean = getHasOperatePermission();
// 表格数据
const tableData = ref<UserListInfo[]>([]);
// 列配置
const columns: TableColumn[] = [
  { prop: "username", label: "账号", headerAlign: "left", align: "left", show: true },
  { prop: "roleType", slot: "roleType", label: "角色", show: true },
  { prop: "name", label: "用户名称", show: true },
  { prop: "lastLoginAt", label: "最后登录时间", show: true },
  {
    prop: "operate",
    slot: "operate",
    label: "操作",
    headerAlign: "right",
    align: "right",
    show: true,
  },
].filter((item) => item.show) as TableColumn[];
// 角色类型
const roleTypeMap: Record<number, string> = {
  1: "创建者",
  2: "管理员",
  3: "普通成员",
};
// 分页相关
const total = ref<number>(100); // 总条数
const currentPage = ref<number>(1); // 当前页码
const pageSize = ref<number>(10); // 每页条数
// 处理页码变化
const handlePageChange = (page: number) => {
  currentPage.value = page;
  getUserList();
};
// 处理每页条数变化
const handleSizeChange = (size: number) => {
  pageSize.value = size;
  getUserList();
};
// 页面加载状态
const pageLoading = ref<boolean>(false);
// 获取用户数据
const getUserList = () => {
  if (pageLoading.value) return;
  pageLoading.value = true;
  MemberManageAPI.getUserList({ limit: pageSize.value, page: currentPage.value })
    .then((data) => {
      pageLoading.value = false;
      total.value = data.total;
      pageSize.value = data.per_page;
      currentPage.value = data.current_page;
      tableData.value = data.data;
    })
    .catch(() => {
      pageLoading.value = false;
    });
};

// 编辑
const handleOpenDialog = (row: UserListInfo) => {
  memberManageType.value = 2;
  memberManageDetails.value = row;
  memberManageVisible.value = true;
};
// 移除
const handleDelete = (row: UserListInfo) => {
  ElMessageBox.confirm("确认要移除该成员吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    lockScroll: false,
  })
    .then(() => {
      MemberManageAPI.delUser({ username: row.username }).then((data) => {
        handlePageChange(1);
        ElMessage.success("删除成功");
      });
    })
    .catch(() => {
      ElMessage.info("取消删除");
    });
};

// 详情弹出框是否显示
const memberManageVisible = ref<boolean>(false);
// 详情弹出框类型
const memberManageType = ref<number>(1);
// 详情弹出框详情参数
const memberManageDetails = ref<UserListInfo>();
// 打开详情弹出框
const memberManageDialogHandle = () => {
  memberManageType.value = 1;
  memberManageVisible.value = true;
};
// 保存详情弹出框
const confirmMemberManage = () => {
  memberManageVisible.value = false;
  handlePageChange(1);
};

onMounted(() => {
  getUserList();
});
</script>
